<template>
    <div class="myecharts" ref="echartRef"></div>
</template>


<script>
    import * as echarts from 'echarts' //引入echarts
    export default {
        props: ['params'],
        name: '',

        data() {
            return {
                xData: [],
                yData1: [],
                yData2: [],
            };
        },

        mounted() {
            this.getEchartData();
        },
        watch: {
            params: {
                handler(newValue, oldValue) {
                    console.log(newValue);
                    let arr = newValue.slice(0, 10);
                    this.xData = arr.map(item => {
                        return item.customer;
                    });
                    this.yData1 = arr.map(item => {
                        return item.totalNum;
                    });
                    this.yData2 = arr.map(item => {
                        return item.totalPrice;
                    });
                    this.getEchartData();

                },
                deep: true
            },
        },
        methods: {
            getEchartData() {
                let self = this;
                let echart = self.$echarts.init(self.$refs.echartRef);
                var colors = [
                    {
                        type: 'linear',
                        x: 0,
                        x2: 0,
                        y: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#0172e2'
                        }, {
                            offset: 0.5,
                            color: '#0656c6'
                        }, {
                            offset: 0.5,
                            color: '#0656c6'
                        }, {
                            offset: 1,
                            color: '#0f299a'
                        }]
                    },
                    {
                        type: 'linear',
                        x: 0,
                        x2: 0,
                        y: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#F29C62'
                        }, {
                            offset: 0.5,
                            color: '#F29C62'
                        }, {
                            offset: 0.5,
                            color: '#F29C62'
                        }, {
                            offset: 1,
                            color: '#ED7D31'
                        }]
                    },
                ];
                var barWidth = 25;
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br />{a0}: {c0}（万支）<br />{a2}: {c2}（元）',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 14,
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '6%',
                        top: 30,
                        padding: '0 0 10 0',
                        containLabel: true,
                    },
                    legend: {
                        right: 100,
                        top: 0,
                        itemGap: 16,
                        itemWidth: 18,
                        itemHeight: 10,
                        data: [{
                            name: '数量',
                        }, {
                            name: '金额',
                        }],
                        textStyle: {
                            color: '#a8aab0',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        },
                        selectedMode: false
                    },
                    xAxis: [{
                        type: 'category',

                        boundaryGap: true,//坐标轴两边留白
                        data: self.xData,
                        axisLabel: { //坐标轴刻度标签的相关设置。
                            interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                            margin: 15,
                            // rotate: 45,
                            textStyle: {
                                color: '#333',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            },
                            formatter: function (value) {
                                // 每行最多5个字符
                                const maxCharsPerLine = 5;
                                const lines = [];

                                // 分割文本
                                for (let i = 0; i < value.length; i += maxCharsPerLine) {
                                    lines.push(value.substring(i, i + maxCharsPerLine));
                                }

                                // 超过2行则显示省略号
                                if (lines.length > 2) {
                                    return lines[0] + '\n' + lines[1] + '...';
                                }

                                return lines.join('\n');
                                // return value.length > 5 ? value.substr(0, 5) + '...' : value;
                            }
                        },
                        axisTick: {//坐标轴刻度相关设置。
                            show: false,
                        },
                        axisLine: {//坐标轴轴线相关设置
                            lineStyle: {
                                color: '#333',
                                opacity: 0.06
                            }
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false,
                        }
                    }],
                    yAxis: [
                        {
                            name: '(万支)',
                            nameLocation: 'end',
                            nameTextStyle: {
                                padding: [0, 0, 0, -50]
                            },
                            type: 'value',
                            splitNumber: 5,
                            axisLabel: {
                                textStyle: {
                                    color: '#333',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#333'],
                                    opacity: 0.06
                                }
                            }

                        },
                        {
                            name: '(元)',
                            nameLocation: 'end',
                            nameTextStyle: {
                                padding: [0, -50, 0, 0]
                            },
                            position: "right",
                            type: 'value',
                            splitNumber: 5,
                            axisLabel: {
                                textStyle: {
                                    color: '#333',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#333'],
                                    opacity: 0.06
                                }
                            }

                        }
                    ],
                    series: [
                        {
                            z: 1,
                            name: '数量',
                            type: 'bar',
                            barWidth: barWidth,
                            data: self.yData1,
                            itemStyle: {
                                normal: {
                                    color: colors[0]
                                },
                            }
                        }, {
                            z: 3,
                            name: '数量',
                            type: 'pictorialBar',
                            symbolPosition: 'end',
                            data: self.yData1,
                            symbol: 'diamond',
                            symbolOffset: [-12.5, '-50%'],
                            symbolSize: [barWidth - 3, (10 * (barWidth - 4)) / barWidth],
                            itemStyle: {
                                normal: {
                                    borderColor: '#319cf1',
                                    borderWidth: 2,
                                    color: '#319cf1'
                                }
                            },

                        },
                        {
                            z: 1,
                            name: '金额',
                            yAxisIndex: 1,
                            type: 'bar',
                            barGap: 0,
                            barWidth: barWidth,
                            data: self.yData2,
                            itemStyle: {
                                normal: {
                                    color: colors[1]
                                }
                            }
                        },
                        {
                            z: 3,
                            name: '金额',
                            yAxisIndex: 1,
                            type: 'pictorialBar',
                            symbolPosition: 'end',
                            data: self.yData2,
                            symbol: 'diamond',
                            symbolOffset: [12.5, '-50%'],
                            symbolSize: [barWidth - 3, (10 * (barWidth - 4)) / barWidth],
                            itemStyle: {
                                normal: {
                                    borderColor: '#F2BF9D',
                                    borderWidth: 2,
                                    color: '#F2BF9D'
                                }
                            },
                        }
                    ]
                }
                echart.setOption(option);
            }
        },
    };
</script>

<style lang="scss" scoped>
    .myecharts {
        width: 100%;
        height: 300px;
    }
</style>